<ui-component name="searchinput" path="%flowsearch" config="type:search;placeholder:@(Search components);autofocus:2"></ui-component>
<ui-component name="viewbox" config="scrollbar:1;visibleY:1;parent:auto;margin:28;initdelay:500;scrollbarshadow:1" class="invisible flowcomponentscontainer">

	<ui-component name="empty" path="flow.components2" config="parent:auto;icon:ti ti-plug">

		<script type="text/html">
			<ui-bind path="common.tms" config="hide" class="hidden">
				<div style="padding:10px 20px">@(You don't have installed any FlowStream components)</div>
				<button class="exec button button-inline" data-exec="flow/components"><i class="ti ti-download"></i>@(Download)</button>
			</ui-bind>
		</script>

		<div>
			<ui-component name="search" path="%flowsearch" config="selector:.exec3">
				<ui-bind path="!flow.components2" config="template" class="flowcomponents block">
					<script type="text/html">
					<ui-bind path="flow.head.total" config="show:value>=4050" class="hidden block">
						<figure data-id="group" draggable="true" data-search="@(Group)" style="margin:10px 10px 5px">
							<i class="ti ti-object-group"></i>
							<div class="name"><div>@(Group)</div></div>
						</figure>
						<div style="margin:5px 10px 0 10px" class="fs11">
							<div><span class="exec link" data-exec="flow/components">@(Download components)</span></div>
						</div>
					</ui-bind>
					{{ foreach g in value }}
						<div class="caption">{{ g.name }}</div>
						<div>
						{{ foreach m in g.items }}
							<figure class="exec exec3{{ if m.type }} type-{{ m.type }}{{ fi }}" data-exec3="flow/component_contextmenu" data-id="{{ m.id }}" draggable="true" data-search="{{ m.name }}{{ if m.schema }} {{ m.schema }}{{ fi }}" data-exec="flow/readme" title="{{ if m.schema }}{{ m.schema }}{{ else }}{{ m.name }}{{ fi }}">
								<i class="{{ m.icon }}"{{ if m.color }} style="color:{{ m.color }}"{{ else if g.color }} style="color:{{ g.color }}"{{ fi }}></i>
								<div class="name">{{ if m.schema }}<span>{{ m.name }}</span>{{ fi }}<div>{{ if m.schema }}{{ m.schema }}{{ else }}{{ m.name }}{{ fi }}</div></div>
							</figure>
						{{ end }}
						</div>
					{{ end }}
					</script>
				</ui-bind>
			</ui-component>
			<br />
		</div>
	</ui-component>

</ui-component>
